import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

import Checkbox from './Checkbox';

export default class AgreeItem extends React.Component {

  handleClick = () => {

    this.refs && this.refs.handleClick();
  }

  render() {
    let {
      style,
      checkboxStyle,
      children,
      disabled,
      checked,
      defaultChecked,
      onChange,
    } = this.props;

    let contentDom = !children ? null :
      React.isValidElement(children) ? (children) : (
        <Text>{children}</Text>
      );

    return (
      <TouchableWithoutFeedback
        onPress={this.handleClick}>
        <View style={[styles.agreeItem, style]}>
          <Checkbox
            ref={ref => this.refs = ref}
            style={[styles.agreeItemCheckbox, checkboxStyle]}
            disabled={disabled}
            checked={checked}
            defaultChecked={defaultChecked}
            onChange={onChange}
          />
          <View style={{flex: 1}}>{contentDom}</View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
}

const styles = StyleSheet.create({
  agreeItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  agreeItemCheckbox: {
    marginLeft: 15,
    marginRight: 8,
  },
});
